<script lang="ts" setup>
import { /* useDeleteJcOrgSys, */ useGetEnterpriseType, useGetGroups, useGetJcOrgDataSource, useGetSysOrgDataSourceTree, useJcOrgSys } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
// import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import Add from './add.vue'
import { ORGTYPE_DICT } from './constant'
import Show from './show.vue'
import synchronization from './synchronization.vue'

const showType = ref<'edit' | 'view'>('view')

// const { createConfirmModal } = useMessage()

const { path } = useRoute()

const tableRef = ref()

const isSetting = path.includes('organization-setting') // 是否系统配置

const initialState = {
    orgName: '',
}

// const { isPending, mutate } = useDeleteJcOrgSys()

const state = ref(cloneDeep(initialState))

const columns = [
    {
        label: '组织全称',
        prop: 'orgName',
        renderField: (_, onChange) => {
            return h(ElInput, {
                onChange,
                onKeydown: (event: any) => {
                    if (event.key === 'Enter') {
                        event.preventDefault()
                    }
                },
            })
        },
        valueType: 'Input',
    },
]

const params = computed(() => {
    return {
        ...state.value,
    }
})

const showVisible = ref<boolean>(false)

const synchronizationVisible = ref<boolean>(false)

const addVisible = ref<boolean>(false)

const id = ref<any>('')

const { data: OrgDataSourceData, isLoading: OrgDataSourceLoading } = isSetting ? useJcOrgSys(params) : useGetJcOrgDataSource()

const typeParam = ref(1)
const isNeedTenderAgent = true
const { data: enterpriseTypeList } = useGetEnterpriseType(typeParam, isNeedTenderAgent)
const enterpriseTypeOptions = computed(() => (enterpriseTypeList.value ?? []).map(x => ({ label: x.label, value: Number(x.value) })))

const { data: groupList } = useGetGroups()
const groupOptions = computed(() => (groupList.value ?? []).map(x => ({ label: x.groupName, value: x.id })))

const { data: SourceTreeData } = useGetSysOrgDataSourceTree()
const treeSelect = computed(() => SourceTreeData.value ? cloneDeep(SourceTreeData.value) : [])

const treeData = computed(() => OrgDataSourceData.value ? cloneDeep(OrgDataSourceData.value) : [])

// const loading = computed(() => OrgDataSourceLoading.value || isPending.value)
const loading = computed(() => OrgDataSourceLoading.value)

function showDetail(row: any) {
    showType.value = 'view'
    id.value = row.id
    showVisible.value = true
}

function editDetail(row: any) {
    showType.value = 'edit'
    id.value = row.id
    showVisible.value = true
}

// function deleteRow(row: any) {
//     createConfirmModal({
//         content: '是否确认删除?',
//         onError: () => {
//             ElMessage.info('取消删除')
//         },
//         onSuccess: () => {
//             mutate(row.id, {
//                 onSuccess: () => {
//                     ElMessage.success('操作成功')
//                 },
//             })
//         },
//     })
// }

function showAdd() {
    id.value = 0
    addVisible.value = true
}

function showSynchronization() {
    synchronizationVisible.value = true
}

function search(val: any) {
    state.value = cloneDeep(val)
}

function setAllTreeExpand() {
    const $table = tableRef.value
    if ($table) {
        $table.setAllTreeExpand(true)
    }
}

function closeExpandTreeEvent() {
    const $table = tableRef.value
    if ($table) {
        $table.clearTreeExpand()
    }
}

function reset() {
    state.value = initialState
}
</script>

<template>
    <ElCard shadow="never">
        <template #header>
            <div class="text-16 font-700">
                组织列表
            </div>
        </template>

        <SearchForm v-if="isSetting"
                    v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="reset"
        />

        <div v-if="isSetting"
             class="mb-20"
        >
            <el-button @click="setAllTreeExpand">
                展开
            </el-button>

            <el-button @click="closeExpandTreeEvent">
                收起
            </el-button>

            <el-button type="primary"
                       @click="showAdd"
            >
                新增组织
            </el-button>

            <el-button v-if="false"
                       type="primary"
                       @click="showSynchronization"
            >
                批量同步组织
            </el-button>
        </div>

        <vxe-table ref="tableRef"
                   :column-config="{ resizable: true }"
                   :tree-config="{ transform: true, rowField: isSetting ? 'orgCode' : 'ZZ_ZZBM', parentField: isSetting ? 'parentCode' : 'ZZ_SJZZ' }"
                   :data="treeData"
                   align="center"
                   show-overflow
                   border
                   :loading="loading"
                   :height="isSetting ? 520 : 700"
        >
            <vxe-column :field="isSetting ? 'orgName' : 'ZZ_ZZQC'"
                        title="组织全称"
                        tree-node
                        width="250"
                        align="left"
            />

            <vxe-column :field="isSetting ? 'orgType' : 'ZZ_ZZLB'"
                        title="组织类别"
            >
                <template #default="{ row }">
                    {{ isSetting ? ORGTYPE_DICT?.[row?.orgType] : row.ZZ_ZZLB }}
                </template>
            </vxe-column>

            <vxe-column v-if="!isSetting"
                        field="orgLeader"
                        title="组织负责人"
            />

            <vxe-column v-if="!isSetting"
                        field="orgDeputyLeader"
                        title="组织分管领导"
            />

            <vxe-column field="updateUser"
                        title="修改人"
            />

            <vxe-column :field=" isSetting ? 'updateTime' : 'ZZ_XGSJ'"
                        title="修改时间"
            />

            <vxe-column v-if="isSetting"
                        field="source"
                        title="来源"
            />

            <vxe-column v-if="!isSetting"
                        field="ZZ_ZZZT"
                        title="组织状态"
            />

            <vxe-column title="操作"
                        :width="isSetting ? '250' : '100'"
            >
                <template #default="{ row }">
                    <el-button text
                               @click="showDetail(row)"
                    >
                        {{ isSetting ? '查看' : '详情' }}
                    </el-button>

                    <template v-if="isSetting">
                        <el-button v-if="row.parentCode"
                                   text
                                   @click="editDetail(row)"
                        >
                            编辑
                        </el-button>

                        <!-- <el-button v-if="row.parentCode"
                                   text
                                   @click="deleteRow(row)"
                        >
                            删除
                        </el-button> -->
                    </template>
                </template>
            </vxe-column>
        </vxe-table>
    </ElCard>

    <Show :key="id"
          v-model:visible="showVisible"
          v-model:id="id"
          v-model:showType="showType"
          v-model:treeSelect="treeSelect"
          v-model:enterpriseTypeOptions="enterpriseTypeOptions"
    />

    <synchronization v-if="isSetting"
                     :key="id"
                     v-model:id="id"
                     v-model:visible="synchronizationVisible"
                     v-model:treeSelect="treeSelect"
                     v-model:enterpriseTypeOptions="enterpriseTypeOptions"
    />

    <Add v-if="isSetting"
         :key="id"
         v-model:visible="addVisible"
         v-model:id="id"
         v-model:treeData="treeSelect"
         v-model:enterpriseTypeOptions="enterpriseTypeOptions"
         v-model:groupOptions="groupOptions"
    />
</template>
